<template>
  <div class="content">
    <ul class="my-tab" id="myUl">
      <li @click="choose1">默认排序</li><li @click="choose2">低价优先</li>
    </ul>
    <ul>
      <li class="item clearfix">
        <div class="item-img">
          <img src="./images/coll.png">
        </div>
        <div class="item-desc">
          <div class="name">
            百特纯酿干红葡萄酒（带盒）750ml
          </div>
          <div class="price">
            会员价：¥788
          </div>
          <div class="operate">
            <span>删除</span>
            <span>加入购物车</span>
          </div>
        </div>
      </li>
      <li class="item clearfix">
        <div class="item-img">
          <img src="./images/coll.png">
        </div>
        <div class="item-desc">
          <div class="name">
            百特纯酿干红葡萄酒（带盒）750ml
          </div>
          <div class="price">
            会员价：¥788
          </div>
          <div class="operate">
            <span>删除</span>
            <span>加入购物车</span>
          </div>
        </div>
      </li>
    </ul>

  </div>
</template>

<script>
  export default {
    components: {
    },
    data(){
      return {
      };
    },
    mounted(){

    },
    methods: {
      choose1(){
        var oUl = document.getElementById("myUl");
        oUl.className = "my-tab";
      },
      choose2(){
        var oUl = document.getElementById("myUl");
        oUl.className = "my-tab2";
      }
    },
    filters: {}
  }
</script>

<style scoped>
  .content{
    text-align: left;
  }
  .my-tab {
    padding: .5rem 0;
    overflow: hidden;
    text-align: center;
  }
  .my-tab li:first-child {
    /*float: left;*/
    display: inline-block;
    font-size: .65rem;
    color: #fff;
    background: #E93B3D;
    border-radius: .8rem 0 0 .8rem;
    padding: .4rem 1.5rem;
  }
  .my-tab li:last-child {
    /*float: left;*/
    display: inline-block;
    font-size: .65rem;
    color: #555;
    background: #fff;
    border: 1px solid #fff;
    padding: .4rem 1.5rem;
    border-radius: 0 .8rem .8rem 0;
  }
  .my-tab2 {
    padding: .5rem 0;
    overflow: hidden;
    text-align: center;
  }
  .my-tab2 li:first-child {
    /*float: left;*/
    display: inline-block;
    font-size: .65rem;
    color: #555;
    background: #fff;
    border: 1px solid #fff;
    border-radius: .8rem 0 0 .8rem;
    padding: .4rem 1.5rem;
  }
  .my-tab2 li:last-child {
    /*float: left;*/
    display: inline-block;
    font-size: .65rem;
    color: #fff;
    background: #E93B3D;
    padding: .4rem 1.5rem;
    border-radius: 0 .8rem .8rem 0;
  }
  .item{
    margin: 0 .75rem .5rem;
    padding: .5rem;
    background: #fff;
  }
  .item .item-img{
    float: left;
    width: 28%;
  }
  .item-img img{
    width: 100%;
    height:100%;
  }
  .item-desc{
    float: left;
    width: 70%;
    margin-top: .5rem;
  }
  .item-desc .name{
    font-size: .7rem;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .item-desc .price{
    font-size: .65rem;
    color: #F74C4E;
    margin-top: .1rem;
  }
  .item-desc .operate{
    margin-top: .5rem;
  }
  .item-desc .operate span:first-child{
    font-size: .55rem;
    color: #777777;
    border: 1px solid #CECECE;
    border-radius: 5rem;
    padding: .25rem 1.5rem;
  }
  .item-desc .operate span:last-child{
    font-size: .55rem;
    color: #fff;
    background: #E93B3D;
    border: 1px solid #E93B3D;
    border-radius: 5rem;
    padding: .25rem .5rem;
  }
</style>
